<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuejs</title>
<script src="./vue.js"></script>
</head>
<body>
	<div id="blog-post-demo">
		<!-- <blog-post title="My journey with Vue"></blog-post>
		<blog-post title="Blogging with Vue"></blog-post>
		<blog-post title="Why Vue is so fun"></blog-post> -->
		<blog-post v-for="post in posts" v-bind:key="post.id" :index="post.id" v-bind:title="post.title" ></blog-post>
	</div> 
<script>
	Vue.component('blog-post',{
		props:['title','index'],
		//template:'<a href="c.php?id={{index}}">{{title}}</a>',
		template:'<h1 class="c{{index}}">{{title}}</h1>',
	});
	new Vue({
		el:'#blog-post-demo',
		data: {
			posts:[
				{id:1, title:'My journey with Vue'},
				{id:2, title:'Blogging with Vue'},
				{id:3, title:'Why Vue is so fun'},
			]
		},
	});
</script>
</body>
